<template>
  <div class="job-select-container">
    <div class="title">欢迎使用物联网设备管理平台</div>
    <el-form class="form">
      <!-- <el-form-item>
        <svg-icon icon-class="user"></svg-icon>
        <el-input
          v-model="loginForm.identity"
          placeholder="账号（支持用户名、手机号和邮箱）"
        ></el-input>
      </el-form-item> -->
      <div class="form-message">请选择您的岗位</div>
      <el-form-item>
        <el-select
          v-model="jobId"
          placeholder="请选择岗位"
        >
          <el-option
            v-for="item in jobList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button
        :loading="btnLoading"
        type="primary"
        class="form-btn"
        @click="switchJob"
      >确定</el-button>
    </el-form>
    <div class="footer"></div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { parseError } from '../../../utils/index';
import * as md5 from 'md5';
import { getUserJobsApi, updateUserJobApi } from '../../../api/user';

export default {
  data() {
    return {
      btnLoading: false,
      loginForm: {
        identity: '',
        password: ''
      },
      jobList: [],
      jobId: ''
    };
  },
  created() {
    // document.addEventListener('keyup', this.enterKey);
    getUserJobsApi()
      .then(res => {
        this.jobList = res;
        this.jobId = this.jobList[0].id;
        this.$store.dispatch('setJobData', { jobList: this.jobList, jobId: this.jobId });
      })
      .catch(error => Message.error(parseError(error)));
  },
  methods: {
    showPassword() {
      this.passwordType = 'text';
    },
    hiddePassword() {
      this.passwordType = 'password';
    },
    enterKey(event) {
      const code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
      if (code === 13) this.login();
    },
    switchJob() {
      this.btnLoading = true;
      updateUserJobApi(this.jobId)
        .then(res => {
          if (res.result) {
            this.$store.dispatch('setJobData', { jobList: this.jobList, jobId: this.jobId });
            this.$router.replace('/dashboard');
          }
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    }
  },
  destroyed() {
    document.removeEventListener('keyup', this.enterKey);
  }
};
</script>

<style lang="scss" scoped>
.job-select-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2d3a4b;
  color: white;
  .title {
    font-size: 30px;
    letter-spacing: 20px;
    text-align: center;
    padding-bottom: 50px;
  }
  .form {
    width: 450px;
    &-message {
      text-align: center;
      margin-bottom: 38px;
    }
    .svg-icon {
      font-size: 18px;
      color: white;
      padding-left: 10px;
    }

    &-btn {
      width: 100%;
      padding-top: 10px;
    }
  }
  .footer {
    height: 40vh;
  }
}
.el-input__inner {
  height: 55px;
}
</style>

<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .job-select-container .el-input input {
    // color: $cursor;
  }
}

.job-select-container {
  .el-input {
    display: inline-block;
    // height: 47px;
    width: 100%;

    // input {
    //   background: transparent;
    //   border: 0px;
    //   -webkit-appearance: none;
    //   border-radius: 0px;
    //   padding: 12px 5px 12px 15px;
    //   color: $light_gray;
    //   height: 47px;
    //   caret-color: $cursor;

    //   &:-webkit-autofill {
    //     box-shadow: 0 0 0px 1000px $bg inset !important;
    //     -webkit-text-fill-color: $cursor !important;
    //   }
    // }
  }
  .el-select {
    width: 100%;
  }

  // .el-form-item {
  //   border: 1px solid rgba(255, 255, 255, 0.1);
  //   background: rgba(0, 0, 0, 0.1);
  //   border-radius: 5px;
  //   color: #454545;
  //   .el-select {
  //     width: 100%;
  //   }
  // }
}
</style>
